<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/logo.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../lib/jquery/dist/jquery.js"></script>
</head>

<body>
    <div class="top">
        <a href="index.html" class="top-a">
            <img src="../images/mi-logo.jpg" alt="">
            <div class="top-t">
                <h1>小米商城</h1>
                <p>让每个人都能享受科技的乐趣</p>
            </div>
        </a>
    </div>
    <div class="banner">
        <img src="../images/banner.jpg" alt="">
        <div class="bge">
            <ul class="bgul">
                <li>账号登入</li>
                <span>|</span>
                <li>扫码登入</li>
            </ul>
            <form>
                <input type="text" name="username" class="username" id="input1" placeholder="邮箱/手机号码/小米ID">
                <br/>
                <input type="password" name="password" class="password" id="input2" placeholder="密码">
                <button>登入</button>
            </form>
            <div class="bt">
                <a href="" id="n1">手机短信登入/</a>
                <a href="" id="n2">注册</a>
                <div class="ri">
                    <a href="" id="n3">立即注册</a>
                    <span>|</span>
                    <a href="" id="n4">忘记密码</a>
                </div>
            </div>
        </div>
    </div>

    <!--事件的登入-->
    <script>
         // 0. 获取元素
    var nameInp = document.querySelector('.username')
    var passInp = document.querySelector('.password')
    // var errorInfo = document.querySelector('span')

    // 1. 绑定事件
    var form = document.querySelector('form')
    // 1-1. 绑定表单提交事件
    form.onsubmit = function (e) {
      e = e || window.event
      e.preventDefault()

      // 2. 获取用户输入的内容
      var uname = nameInp.value
      var upass = passInp.value

      // 3. 表单验证
      //    非空验证
      //    格式验证 -> 正则
      if (!uname || !upass) {
        // 你没有填写 uname 或者 没有填写 upass
        // 就会执行这个 if 条件
        alert('请完整填写表单')
        // 这里表示没有完整填写表单, 后面的代码就没有必要执行了
        return
      }

      // 4. 发送请求
      //   把用户名和密码发送到后端
      // 4-1. 创建 ajax 对象
      var xhr = new XMLHttpRequest()

      // 4-2. 配置本次请求的信息
      xhr.open('POST', '/login') 

      // 4-3. 接受响应
      xhr.onload = function (res1) {
        var res1 = JSON.parse(xhr.responseText)
        // console.log(xhr.responseText);
        // console.log(res1);
        if (res1.code===1) { 
          // 提示错误
          // alert('用户名或密码错误')
          // 让这个 span 标签显示出来就可以了
        //   errorInfo.style.display = 'block'
          window.location.href = './index.html'
        } else {
          alert('请求失败');
        }

      }

      // 4-4. 设置请求头
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

      // 4-5. 发送请求
      //      在 () 里面携带参数
      // xhr.send('username=' + uname + '&password=' + upass)
      xhr.send(`username=${uname}&password=${upass}`)
    }





        // var inp1 = document.getElementById('input1');
        // var inp2 = document.getElementById('input2');
        // var button1 = document.getElementsByTagName('button')[0];
        
    // 1. 绑定事件
    // var form = document.querySelector('form')
    // // 1-1. 绑定表单提交事件
    // form.onsubmit = function (e) {
    //   e = e || window.event
    //   e.preventDefault()
    //     // button1.onclick = function () {
    //         //表单的验证
    //         var  ip1 = inp1.value;
    //         var ip2 = inp2.value;
    //         if (ip1.length == 0 || ip2.length == 0) {
    //             return alert('账号或密码不能为空');
    //         }
    //         else if (isNaN(ip1) == false) {
    //             alert('账号不能是数字');
    //         }
    //         else if (isNaN(ip2)!=false) {//isNaN(数字)结果就是false 
    //             alert('密码请输入数字');
    //         }else if(ip2.length<0||ip2.length>=7){
    //             alert('密码不能小于0或大于7');
    //         }
    
    // $.ajax({
    //         url:'/login',//(必填)
    //         type:'POST',//这里的参数要注意,默认为get请求,get请求可以不写
    //         data:`username=${ip1}&password=${ip2}`,//数据类型可以是字符串或对象
    //         dataType:'json',//这里的t是大写
    //         async:true,//默认是异步
    //         success:function(res){ 
    //             console.log(res);
    //         if(res=='请求成功了'){
    //             window.location.href = './index.html'
    //          }else{
    //              alert('用户名错误');
    //          }
    //     },
            
    //     });
    // }
        // //gulp做代理服务器，一定要重启gulp服务,因为修改了gulpfile文件，修改了配置文件
        // $.ajax({
        //     url: '/login',/*跨域请求,请求代理标识符,gulp会帮你自动请求*/
        //     type: 'post',
        //     data: {
        //         username: inp1,
        //         password: inp2,
        //     },
        //     success: function (res) {
        //         console.log(res);
        //     },
        // })

            // //发送请求
            // var xhr=new XMLHttpRequest();//创建一个对象
            // //配置本地请求的信息
            // xhr.open('POST','/login');
            // //接受响应体
            // xhr.onload=function(){

            
    </script>
</body>

</html>